<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <script src="js/vue.js"></script>
</head>
<style>
   .box{
        width: 100px;
        height: 100px;
        background-color: palevioletred;
        transition: .3s;
    }
    [style]{
        height: 100px;
        background-color: palevioletred;
        transition: .3s;
    }
</style>
<body>
<div id="app">
    <div class="box" :style="{
        transform: 'translate('+x+'px,'+y+'px) scale('+s+')'
    }"></div>
</div>
<script>
    Vue.createApp({
        data(){
            return{
                x:0,
                y:0,
                s:1
            }
        },
        mounted(){  // 整个文档添加键盘事件
            document.addEventListener('keydown',this.move)
        },
        methods:{
            move(event){
                let code=event.keyCode  //键码
                if(code == 187 || code == 107) this.s+=0.1  //放大
                if(code == 189 || code == 109) this.s-=0.1  //缩小
                if(code == 37){ //左边
                    if(this.x>0)this.x-=10
                }
                if(code == 38){ //上边
                    if(this.y>0)this.y-=10
                }
                if(code == 39){ //右边
                    this.x+=10
                }
                if(code == 40){ //下边
                    this.y+=10
                }
            }
        }
    }).mount('#app')
</script>
</body>
</html>